<template>
  <view class="content">
    <!-- 图二原有代码：文本插值、事件处理、条件渲染等 -->
    <image :class="className" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title" v-on:click="open">{{title}}</text>
    </view>
    <view>
      <view>{{ number + 1 }}</view>
      <view>{{ ok ? 'YES' : 'NO' }}</view>
      <view>{{ message.split('').reverse().join('') }}</view>
    </view>

    <button @click="handleClick('参数1')">按钮1</button>
    <button @click="handleClick(dynamicParam)">按钮2</button>
    <button @click="handleClick('参数A', '参数B', $event)">按钮3</button>
    <button @click="(e) => handleButton('点击事件', e)">带事件对象</button>

    <view class="modelClass">
      <input v-model="message" placeholder="edit me">
      <text>Message is: {{ message }}</text>
    </view>

    <image class="logo" v-on:click="change" src="/static/logo.png"></image>
    <view v-if="!raining">今天天气真好</view>
    <view v-if="raining">下雨天，只能在家呆着了</view>
    <view v-if="state === 'vue'">state的值是 Vue</view>
    <view>State is {{ state ? 'vue' : 'APP' }}</view>
    <view>
      <view v-if="state === 'vue'">uni-app</view>
      <view v-else-if="state === 'html'">HTML</view>
      <view v-else>APP</view>
    </view>

    <view>
      
      <view v-for="item in arr" style="color: #ff9999;">
        {{ item }}
      </view>
      
      <view v-for="(item, index) in arr" style="color: #00ff00;">
        <view class="list-{{ index % 2 }}">{{ index }}</view>
      </view>
      
      <view v-for="(value, name, index) in object">
        {{ index }} - {{ name }}: {{ value }}
      </view>
      
      <view v-for="item in arr" :key="item.id" style="color: #0000ff;">
        {{ item.id }}: {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello UniAPP',
      className: 'smalllogo',
      number: 1,
      ok: true,
      message: 'Hello Vue!',
      dynamicParam: '我是动态参数',
      raining: false,
      state: 'vue',
      
      arr: [
        { id: 1, name: 'uni-app' },
        { id: 2, name: 'HTML' }
      ],
      
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2020-04-10'
      }
    }
  },
  methods: {
    open() {
      this.title = "opening a new Page";
      this.className = 'logo'
    },
    handleClick(param1, param2, event) {
      console.log("参数1:", param1)
      console.log("参数2:", param2);
      console.log("事件对象:", event)
    },
    handleButton(msg, event) {
      console.log('接收的消息:', msg)
      console.log('事件对象:', event)
      console.log('按钮文本:', event.target.textContent)
    }
  }
}
</script>
<style>
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		
	}
	.logo{
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	.smalllogo{
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
</style>